@import "rule";
@import "reset";
@import "resetElementPlus";
:root {
    --primary: @primary;
    --primary-light: @primary-light;
    --success: @success;
    --success-light: @success-light;
    --info: @info;
    --warning: @warning;
    --warning-light: @warning-light;
    --danger: @danger;
    --danger-light: @danger-light;
    --dark: @dark;
    --light: @light;
}
[data-theme="dark"]:root{
    --primary: @dark-primary;
}
img{
    vertical-align: bottom;
}
.clearfix {
    display: block;
    zoom: 1;

    &:after {
        content: " ";
        display: block;
        font-size: 0;
        height: 0;
        clear: both;
        visibility: hidden;
    }
}
.fl{
    float: left;
}
.fr{
    float: right;
}
.hidden{
    visibility: hidden;
}
.center{
  display: flex;
  align-items: center;
  justify-content: center;
}
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word
}
/* 方法超纲了，好不容易才把单循环玩明白，谁如果会多循环就改写一下*/
@iterations: 40;
.ml-loop(@index) when (@index >= 0) { 

    .ml-@{index} {
        margin-left: ~"@{index}px";
    }

    .ml-loop(@index - 5); 
}
.ml-loop(@iterations); 
.mr-loop(@index) when (@index >= 0) { 

    .mr-@{index} {
        margin-right: ~"@{index}px";
    }

    .mr-loop(@index - 5); 
}
.mr-loop(@iterations); 
.mt-loop(@index) when (@index >= 0) { 

    .mt-@{index} {
        margin-top: ~"@{index}px";
    }

    .mt-loop(@index - 5); 
}
.mt-loop(@iterations); 
.mb-loop(@index) when (@index >= 0) { 

    .mb-@{index} {
        margin-bottom: ~"@{index}px";
    }

    .mb-loop(@index - 5); 
}
.mb-loop(@iterations); 






.pl-loop(@index) when (@index >= 0) { 

    .pl-@{index} {
        padding-left: ~"@{index}px";
    }

    .pl-loop(@index - 5); 
}
.pl-loop(@iterations); 
.pr-loop(@index) when (@index >= 0) { 

    .pr-@{index} {
        padding-right: ~"@{index}px";
    }

    .pr-loop(@index - 5); 
}
.pr-loop(@iterations); 
.pt-loop(@index) when (@index >= 0) { 

    .pt-@{index} {
        padding-top: ~"@{index}px";
    }

    .pt-loop(@index - 5); 
}
.pt-loop(@iterations); 
.pb-loop(@index) when (@index >= 0) { 

    .pb-@{index} {
        padding-bottom: ~"@{index}px";
    }

    .pb-loop(@index - 5); 
}
.pb-loop(@iterations); 



// 去除按钮点击之后的focus状态
body{
    .el-button--primary:focus{
        background: #409eff;
    }
}

// nprogress包 覆盖默认颜色
#nprogress {
    div.bar {
        background-color: #44c66f;
    }
}


#page_load_mask {
    position: fixed;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 20;
    background: @white;
    background: rgba(255, 255, 255, 0.3);
    .loading {
        width: 250px;
        height: 250px;
        background: url(@/assets/img/loading_global.gif) no-repeat center center
            @white;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -125px;
        margin-left: -125px;
        &:before {
            content: '';
            position: absolute;
            background: rgba(255, 255, 255, 0.3);
            padding: 10px;
            left: -10px;
            top: -10px;
            height: 100%;
            width: 100%;
        }
    }
}
